<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise</title>
    <script src='./jquery3.5.min.js'></script>
</head>
<body>
    <button onclick="dofeach()">button</button>
    <br><br><br>
    <button onclick="dofeach2()">async,await</button>
    <br><br><br>
    <button onclick="dofeach3()">async,await</button>
    <br><br><br>
    <button onclick="dofeach4()">async,await</button>
    <br><br><br>
    <button onclick="dofeach5()">async,await2222</button>
    <script>
        function com(res){//抽离公共的部分减少代码量 
            //封装的ajax请求吧函数封装在promise对象
            return new Promise( function (resolve, reject) {//异步操作
                $.ajax({
                url:res,
                type:'get',
                data:{

                },
                success:function(res){
                    resolve(res);
                },
                error:function(err){
                    reject(new Error())//new Error()抛出错误的对象
                    }
                })
            })//构造函数
        }
        // 可添加访问参数：
        // start : 数据的开始项
        // count：单页条数
        // city：城市
        // 如：获取 广州热映电影 第一页 10条数据：
        // https://api.douban.com/v2/movie/in_theaters?city=广州&start=0&count=10
        async function dofeach5(){
            const data = await com('http://api.douban.com/v2/movie/top250');
            console.log(data)
        }
        function dofeach3(){
            com('http://192.168.10.123:9999/path1')
            .then( (res)=>{//接受成功的回调
                console.log(111);
            })
            console.log(222)
        }
        async function dofeach4(){
            const data = await com('http://192.168.10.123:9999/path1');
            console.log(111)
        }
        
        async function dofeach2(){
            // 需要等待什么东西先完成就在之前写上await
            //async/await必须都有基于promise才能使用
           const data1 = await com('http://192.168.10.123:9999/path1')//等待前面的代码执行完再执行后面的调用赋值操作
           console.log('111',data1)
           const data2 = await com('http://192.168.10.123:9999/path2')
           console.log('2',data2)
           const data3 = await com('http://192.168.10.123:9999/path3')
           console.log('3',data3)
           const data4 = await com('http://192.168.10.123:9999/path4')
           console.log('4',data4)
        }
        function dofeach(){
            com('http://192.168.10.123:9999/path1')
            .then( (res)=>{//接受成功的回调
                console.log('res1',res);
                return com('http://192.168.10.123:9999/path2')
            })
            .then( (res)=>{//接受成功的回调
                console.log('res2',res);
                return com('http://192.168.10.123:9999/path3')
            })
            .then( (res)=>{//接受成功的回调
                console.log('res3',res);
                return com('http://192.168.10.123:9999/path4')
            })
            .then( (res)=>{//接受成功的回调
                console.log('res4',res);
                return com('http://192.168.10.123:9999/path5')
            })
            .then( (res)=>{//接受成功的回调
                console.log('res5',res);
               //最后如果拿到结果就不用return了
            })
            .catch((err)=>{//接受失败的回调

            })
        }
    </script>
</body>
</html>